<template>
  <h1>home</h1>
  <el-row>
    <!-- 路由传参 常用的方式 query和params
      query? key=value&key=value
      params  在路由配置时路径当中需要有占位符   在组件当中进行传参时直接写即可
       -->
    <el-col :span="4">
      <router-link
        :to="{ path: '/home/yangyang', query: { id: classes[0].id } }"
        >yangyang</router-link
      >
    </el-col>
    <el-col :span="4">
      <router-link :to="{ name: 'zhilong', params: { id: classes[1].id } }"
        >zhilong</router-link
      >
    </el-col>
  </el-row>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { onBeforeRouteLeave } from "vue-router";

export default defineComponent({
  setup() {
    const classes = reactive([
      {
        id: "01",
        name: "yangyang",
        hobby: ["打游戏", "小马宝莉", "爱敲代码", "喜欢学习"],
      },
      {
        id: "02",
        name: "志龙",
        hobby: ["爱钱", "迪丽热巴", "杨幂", "旅游"],
      },
    ]);
    onBeforeRouteLeave(() => {
      console.log("离开后");
    });
    return {
      classes,
    };
  },
});
</script>

<style scoped>
</style>